import React from 'react'

import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';
import {Fieldset, Form, Label} from "../../../FirestoreCRUD/Article/Article.styles";
import Select,{ SelectOption } from '@iso/components/uielements/select';
import axios from "../../../../http";
import Qs from 'qs'
import message from '@iso/components/Feedback/Message';
import MessageContent from "../../../Feedback/Message/Message.styles";
import PageHeader from '@iso/components/utility/pageHeader';
import Card from "../../../UIElements/Card/Card.styles";
import Button from '@iso/components/uielements/button';
import Alert from '@iso/components/Feedback/Alert';

export default class UserRelationship extends React.Component {


    constructor(props) {

        super(props);

        this.state={userList:[],selectedUserList:[],workScheduleSelectedUserList:[]};

    }

    onUserSelectChange = (value) => {
        this.setState({selectedUserList:value})
    };

    onUserSelectChangeForWorkSchedule = (value) => {
        this.setState({workScheduleSelectedUserList:value})
    };

    componentDidMount() {
        this.loadUserData();
    }


    getUserIdsForWorkReport=()=>{
        return this.getUserIds(this.state.selectedUserList)
    }

    getUserIdsForWorkSchedule=()=>{
        return this.getUserIds(this.state.workScheduleSelectedUserList)
    }
    getUserIds=(selectedUserList:any)=>{
        let userIds=new Array()
        for(let i=0;i<selectedUserList.length;i++){
            let p=selectedUserList[i];
            let userId=p.substring(p.indexOf('_')+1,p.length);
            userIds.push(userId)
        }
        return userIds;
    }


    saveForWorkReport=() =>{
        let entity={type:'WORK_REPORT',userIds:this.getUserIdsForWorkReport()};
        axios.post('api/oa/settings/user/relationship/save', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });

    }

    saveForWorkSchedule=() =>{
        let entity={type:'WORK_SCHEDULE',userIds:this.getUserIdsForWorkSchedule()};
        axios.post('api/oa/settings/user/relationship/save', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.showSuccessMessage(data.message)
                }else{
                    this.showErrorMessage(data.message);
                }
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });

    }


    loadUserData=()=>{
        axios.post('api/core/access/user/findAllExceptLoginUser', Qs.stringify({
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  dataList=response.data.data;
                let userList=new Array()
                for(let i=0;i<dataList.length;i++){
                    let user=dataList[i];
                    userList.push(<SelectOption key={user.realName+'_'+user.id}>{user.name+'('+user.realName+')'}</SelectOption>)
                }
                this.setState({userList:userList},()=> {

                });
                this.loadSelectedUserData('WORK_REPORT');
                this.loadSelectedUserData('WORK_SCHEDULE');
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });

    }

    loadSelectedUserData=(type)=>{
        axios.post('api/oa/settings/user/relationship/findMyAll', Qs.stringify({
            type:type
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  simpleUserList=response.data.data;
                let simpleUserListToUpdate=[];
                simpleUserListToUpdate.splice(0,simpleUserListToUpdate.length)
                for(let i=0;i<simpleUserList.length;i++){
                    let user=simpleUserList[i];
                    simpleUserListToUpdate.push(user.realName+'_'+user.id)
                }
                if(type=='WORK_REPORT'){
                    this.setState({selectedUserList:simpleUserListToUpdate});
                }
                if(type=='WORK_SCHEDULE'){
                    this.setState({workScheduleSelectedUserList:simpleUserListToUpdate});
                }
            })
            .catch(function (error) {
                this.showErrorMessage(error);
            });

    }


    showSuccessMessage (systemMessage){
        message.success(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };
    showErrorMessage (systemMessage){
        message.error(
            <MessageContent>
                {systemMessage}
            </MessageContent>,
            5
        );
    };
     marginBot = {
        marginBottom: '10px',
    };

    render() {
        return (
            <LayoutContentWrapper >
                <PageHeader>
                    汇报对象设置
                </PageHeader>
                <LayoutContent>
                    <Card
                        title='工作日程汇报对象设置'
                        style={{ width: '100%' }}
                    >
                        <Form>
                            <Fieldset>

                                <Alert
                                    message={'被选择的用户可以查看您的工作日程'}
                                    type="warning"
                                    style={this.marginBot}
                                />
                                <Select
                                    mode="multiple"
                                    style={{ width: '100%' }}
                                    value={this.state.workScheduleSelectedUserList}
                                    placeholder="请选择汇报对象"
                                    onChange={this.onUserSelectChangeForWorkSchedule}
                                >
                                    {this.state.userList}
                                </Select>
                            </Fieldset>
                            <Fieldset>
                                <Button type="primary" size='small' onClick={this.saveForWorkSchedule}>
                                    提交
                                </Button>

                            </Fieldset>
                        </Form>
                    </Card>
                    <br/>
                    <Card
                        title='工作报告汇报对象设置'
                        style={{ width: '100%' }}
                    >
                    <Form>
                      <Fieldset>
                          <Alert
                              message={'被选择的用户可以查看您的工作报告'}
                              type="warning"
                              style={this.marginBot}
                          />
                          <Select
                              mode="multiple"
                              style={{ width: '100%' }}
                              value={this.state.selectedUserList}
                              placeholder="请选择汇报对象"
                              onChange={this.onUserSelectChange}
                          >
                              {this.state.userList}
                          </Select>
                      </Fieldset>
                        <Fieldset>
                            <Button type="primary" size='small' onClick={this.saveForWorkReport}>
                                提交
                            </Button>

                        </Fieldset>
                  </Form>
                    </Card>

                </LayoutContent>
            </LayoutContentWrapper>

        )
    }





}
